import React, { Component } from "react";
import Tabbar from "../../components/tabbar/tabbar";
import { nanoid } from "nanoid";
import { Carousel } from "zarm";
import { Link } from "react-router-dom";
import { DateSelect } from "zarm";
import "./home.scss";
const banner = [
  { src: require("../../img/banner1.png").default },
  { src: require("../../img/banner2.png").default },
  { src: require("../../img/banner3.png").default },
];

export default class Home extends Component {
  state = {
    selectday: "",
  };
  componentDidMount(){
    localStorage.setItem("active","1")
    window.document.title = '首页'
  }
  handleClick = (active) => {
    localStorage.setItem("active",active)
    if(active==="1"){
      setTimeout(()=>{ this.props.history.push('/sbbx')},100)
    }
    if(active==="2"){
      setTimeout(()=>{ this.props.history.push('/byrw')},100)
    }
    if(active==="3"){
      setTimeout(()=>{ this.props.history.push('/fjlb')},100)
    }
  };
  render() {
    const { selectday} = this.state;
    const active=localStorage.getItem("active") || "1"
    return (
      <div className="homeIndex">
        <div className="home">
          <div style={{ height: "12px" }}></div>
          {/* 轮播图 */}
          <Carousel loop autoPlay className="carousel">
            {banner.map((item) => (
              <img key={nanoid()} alt="" src={item.src} className="banner" />
            ))}
          </Carousel>
          {/* 菜单项 */}
          <div className="mold">
            {/* 反馈标题 */}
            <div className="mold_up">
              <img src={require("../../img/反馈类型.png").default} alt="" />
              <span>快捷方式</span>
            </div>
            {/* 菜单导航 */}
            <div className="mold_middle">
              <Link to="jyfk">
                <img src={require("../../img/建议反馈.png").default} alt="" />
                <p>建议反馈</p>
              </Link>
              <Link to="/sbbx">
                <img src={require("../../img/设备报修.png").default} alt="" />
                <p>设备报修</p>
              </Link>
              <Link to="/byrw">
                <img src={require("../../img/保养任务.png").default} alt="" />
                <p>保养任务</p>
              </Link>
              <Link to="/sbkg">
                <img src={require("../../img/设备开关.png").default} alt="" />
                <p>设备开关</p>
              </Link>
            </div>
            {/* 报修 */}
            <div className="mold_down">
              <a href="tel:400-0000-677">
                <img
                  src={require("../../img/电话报修-20.png").default}
                  alt=""
                />
              </a>
              <Link to="/tdbx">
                <img
                  src={require("../../img/填单报修-21.png").default}
                  alt=""
                />
              </Link>
            </div>
            {/* 消息 */}
            <div className="mold_last">
              <img src={require("../../img/通知.png").default} alt="" />
              <span>您有新的保养任务,请注意查收！！！</span>
            </div>
          </div>
          {/* 数据看板 */}
          <div className="board">
            <div className="title">
              <div className="mold_up">
                <img src={require("../../img/数据看板.png").default} alt="" />
                <span>数据看板</span>
              </div>
              <div className="select">
                <DateSelect
                  className="test-dateSelect"
                  title="选择日期"
                  placeholder="今日"
                  mode="date"
                  min="2000-01-01"
                  max="2035-10-12"
                  value={selectday}
                  onOk={(selectday) => {
                    this.setState({ selectday }, () => {
                      console.log(selectday);
                    });
                  }}
                />
              </div>
            </div>
            <div className="content">
              <div
                className={
                  active === "1" ? "active common_item" : "common_item"
                }
                onClick={() => this.handleClick("1")}
              >
                <div>待接单(个)</div>
                <div>24</div>
              </div>
              <div
                className={
                  active === "2" ? "active common_item" : "common_item"
                }
                onClick={() => this.handleClick("2")}
              >
                <div>保养任务(个)</div>
                <div>4</div>
              </div>
              <div
                className={
                  active === "3" ? "active common_item" : "common_item"
                }
                onClick={() => this.handleClick("3")}
              >
                <div>未关设别(台)</div>
                <div>56</div>
              </div>
            </div>
          </div>
        </div>
        <Tabbar {...this.props} />
      </div>
    );
  }
}
